import Vue from 'vue'
import VueRouter from 'vue-router'
import usevant from '../views/usevant/index.vue'
// 导入组件
import login from '../views/login/index.vue'
import home from '../views/home/index.vue'
import find from '../views/home/find/index.vue'
import my from '../views/home/my/index.vue'
import question from '../views/home/question/index.vue'
import info from '../views/home/info/index.vue'
import editInfo from '../views/home/editinfo/index.vue'
import shareList from '../views/home/shareList/index.vue'
import search from '../views/home/search/index.vue'
import shareDetail from '../views/home/shareDetail/index.vue'

// 导入操作 local 的方法
import { getlocal } from '@/utils/local.js'
// 导入 toast
import { Toast } from 'vant'
// 导入 vuex
import store from '@/store/index.js'
// 导入得以用户信息的 api
import { getUserInfoApi } from '@/api/au.js'

Vue.use(VueRouter)

const routes = [
  {
    path: '/usevant',
    component: usevant
  },
  // 登录路由
  {
    path: '/login',
    component: login
  },
  // 首页路由
  {
    path: '/home',
    component: home,
    children: [
      {
        path: '/find',
        component: find,
        meta: {
          needTab: true // 需要显示 tabBar
        }
      },
      {
        path: '/my',
        component: my,
        meta: {
          needLogin: true, // 将 my 路由标识为需要登录（需要登录：刷新之后得到 token ，根据 token 得到用户信息，将用户信息保存到 vuex 中）
          needTab: true // 需要显示 tabBar
        }
      },
      {
        path: '/question',
        component: question,
        meta: {
          needLogin: true,
          needTab: true // 需要显示 tabBar
        }
      },
      {
        path: '/info',
        component: info,
        meta: {
          needLogin: true
        }
      },
      {
        path: '/editInfo',
        component: editInfo,
        meta: {
          needLogin: true
        }
      },
      {
        path: '/shareList',
        component: shareList
      },
      {
        path: '/search',
        component: search
      },
      {
        path: '/shareDetail/:id',
        component: shareDetail
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 回顾导航守卫：
// 前置守卫
router.beforeEach(async (to, from, next) => {
  from.meta.scrollTop =
    document.documentElement.scrollTop ||
    window.pageYOffset ||
    document.body.scrollTop

  // to：要跳转到的路由 from：从哪个路由跳转的 next：后续的逻辑代码
  // 登录判断：
  // 判断要跳转的路由是否需要登录：
  if (to.meta.needLogin) {
    // 需要登录： 判断是否存在 token
    // 获取 token
    const token = getlocal('heimamm_web_token')
    if (token) {
      // 判断用户是否登录（判断 vuex 中的 isLogin）
      if (store.state.isLogin) {
        //  true：向下执行
        next()
      } else {
        //  false：根据 token 得到用户信息，将用户信息保存到 vuex 中
        // 发送网络请求
        // getUserInfoApi().then(res => {
        //   // console.log(res.data)
        //   // 将用户信息保存到 vuex 中
        //   store.commit('setUserInfo', res.data)
        //   // 将用户的登录状态改为 true
        //   store.commit('setIsLogin', true)
        // })
        var res = await getUserInfoApi()
        // console.log(res.data)
        // 将用户信息保存到 vuex 中
        store.commit('setUserInfo', res.data)
        // 将用户的登录状态改为 true
        store.commit('setIsLogin', true)
        next()
      }
    } else {
      // 提示未登录，跳转到登录页面
      Toast.fail('对不起，还未登录')
      // 保存当前访问的路径
      // console.log(to.fullPath)
      // 跳转到登录页面
      router.push(`/login?_redirect=${to.fullPath}`)
    }
  } else {
    // 不需要登录：
    next()
  }
})
// 后置钩子
router.afterEach((to, from) => {
  // to：要跳转到的路由 from：从哪个路由跳转的
  window.scrollTo(0, 0)
})

export default router
